<template>
    <a-input
        v-model:value.trim="searchKey"
        :placeholder="placeholderText"
        :style="{width: width + 'px'}"
        allowClear
        @change="onChange"
        @pressEnter="onSearch">
        <template #suffix>
            <search-outlined @click="onSearch"/>
        </template>
    </a-input>

</template>

<script setup lang="ts">
import { SearchOutlined } from '@ant-design/icons-vue'
const props = defineProps({
    placeholderText: {
        type: String,
        default: ''
    },
    width: {
        type: Number,
        default: ''
    }
})
const emit = defineEmits(['onSearch']);
let searchKey = ref<string>("");

const onSearch = () => {
    emit("onSearch", searchKey.value ? searchKey.value : "");
}
const onChange = () => {
    searchKey.value = searchKey.value.replace(/[^a-zA-Z0-9_@.\-\u4e00-\u9fa5]+/g,'')
}
</script>

<style>

</style>